<template>
  <div class="radio w">
    <el-carousel v-if="banner.length != 0">
      <!-- 点击事件用 item.targetId -->
      <el-carousel-item v-for="(item, index) in banner" :key="index">
        <div class="carouselBox">
          <img :src="item.pic" alt="" />
          <div class="subscript">
            {{ item.typeTitle }}
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 分类的 板块 -->
    <RadioCategoryCPM />
    <!-- 排行榜 -->
    <RadioListCPM />
  </div>
</template>

<script>
import { getRadioBanner, getRadioCategory } from "../../../../api/radioApi";
import RadioListCPM from "./components/radioList.vue";
import RadioCategoryCPM from "./components/radioCategory.vue";
export default {
  name: "radio",
  components: { RadioListCPM, RadioCategoryCPM },
  data() {
    return {
      banner: [],
    };
  },
  created() {
    this.getRadioBanner();
  },
  methods: {
    // 获取 电台的banner
    async getRadioBanner() {
      try {
        let result = await getRadioBanner();
        if (result.code == 200) {
          this.banner = result.data;
        }
      } catch (error) {}
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.radio {
  padding: 30px 0;
  font-size: 14px;
  color: #000000;
  /deep/ .el-carousel__item img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
  .carouselBox {
    position: relative;
    height: 100%;
    .subscript {
      position: absolute;
      bottom: 0;
      right: 0;
      text-align: center;
      width: 100px;
      height: 30px;
      line-height: 30px;
      color: #ffffff;
      background-color: @globalColor;

      border-top-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
}
</style>
